<template>
    <div class="device-list">
        <ul class="global-operation-list" style="margin-top: 20px;">
            <li class="global-operation-left">
                <ul class="global-filter-list">
                    <li class="global-filter-item">
                        <h2 class="global-filter-item-title">关键字：</h2>
                        <el-input v-model="searchForm.keyword" @change="getPost" placeholder="项目名称、品牌"
                            clearable></el-input>
                    </li>

                    <li class="global-filter-item">
                        <el-button type="primary" class="global-filter-item-search"
                            :style="{ background: $store.state.theme.theme_color || '#03C192', border: 'none' }"
                            @click="rePosts()">搜索</el-button>
                    </li>
                    <li class="global-filter-item">
                        <el-button type="primary" class="global-filter-item-search" v-if="operationList.includes('add')"
                            @click="addOtherProject">添加</el-button>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="global-table-content">
            <div class="global-table">
                <el-table :data="dataList" :header-cell-style="{
                            background: '#F6F7FA',
                            color: '#333',
                            height: '60px',
                        }" v-loading="tableLoading" :row-style="{ height: '0' }" :cell-style="{ padding: '3px' }"
                    max-height="700" border v-if="dataList && dataList.length > 0">
                    <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
                    <el-table-column label="品牌名称" prop="brands" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="总价" prop="totalPrice" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="参考价格" prop="referencePrice" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="状态" prop="status" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ scope.row.status == 1 ? '待确认时间' :
                            scope.row.status == 2 ? (showMsg.channelPriceMapJson ? '一次竞价中-已推送' : '一次竞价中-待推送') :
                            scope.row.status == 3 ? '二次竞价' :
                            scope.row.status == 4 ? '已结束' : scope.row.status == 5 ? '已流单' : '未知' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop="createDate" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200px">
                        <template slot-scope="scope">
                            <div>
                                <el-button style="font-size: 14px;" type="text"
                                    @click="viewMsg(scope.row)">查看</el-button>
                            </div>
                            <div>
                                <el-popconfirm title="确定删除该值吗？" @confirm="handleCommand(2, scope.row)">
                                    <el-button slot="reference" v-if="operationList.includes('del')"
                                        style="font-size: 14px;" type="text">删除</el-button>
                                </el-popconfirm>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="no-data" v-else
                    style="height: calc(100vh - 130px - 80px);display: flex;align-items: center;justify-content: center;flex-direction: column">
                    <img style="width: 265px;height: 120px;margin-bottom: 32px" src="@/assets/images/tyNoData.png"
                        alt="" />
                    <div style="font-size: 16px;color: #A5A9B5">暂无数据~</div>
                </div>
            </div>
            <div class="global-page">
                <div class="global-page-left">
                </div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-sizes="pageSizes" :page-size="pageSize" :current-page="pageNum" background
                    layout="sizes, total, prev, pager, next" :total="total"></el-pagination>
            </div>
        </div>

        <!-- 新增编辑 -->
        <el-dialog :title="formTitle" :visible.sync="addOtherProjectDialogVisible" width="50%">
            <div>
                <el-form :model="addOtherProjectForm" :rules="addOtherProjectRules" ref="addOtherProjectForm">
                    <el-form-item label="项目名称" prop="projectName" :label-width="formLabelWidth">
                        <el-input v-model="addOtherProjectForm.projectName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌" prop="brands" :label-width="formLabelWidth">
                        <el-input v-model="addOtherProjectForm.brands" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="总价" prop="totalPrice" :label-width="formLabelWidth">
                        <el-input type="number" v-model="addOtherProjectForm.totalPrice" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="开拓者" prop="choosePushUserId" :label-width="formLabelWidth">
                        <el-select v-model="addOtherProjectForm.choosePushUserId" placeholder="请选择">
                            <el-option v-for="(item, index) in userList" :key="index" :label="item.nickName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addOtherProjectDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOtherProjectSubmit">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 详情 -->
        <el-dialog title="详情" :visible.sync="showMsgDialogVisible" width="80%"
            :before-close="beforeOtherProjectHandleClose">
            <div>
                <div>
                    <el-descriptions title="详情">
                        <el-descriptions-item label="项目名称">{{ showMsg.projectName }}</el-descriptions-item>
                        <el-descriptions-item label="品牌名称">{{ showMsg.brands }}</el-descriptions-item>
                        <el-descriptions-item label="总价">{{ showMsg.totalPrice }}</el-descriptions-item>
                        <el-descriptions-item label="参考价格">{{ showMsg.referencePrice }}</el-descriptions-item>
                        <el-descriptions-item label="状态">
                            {{ showMsg.status == 1 ? '待确认时间' :
                            showMsg.status == 2 ? (showMsg.channelPriceMapJson ? '一次竞价中-已推送' : '一次竞价中-待推送') :
                            showMsg.status == 3 ? '二次竞价中' :
                            showMsg.status == 4 ? '已结束' : '未知' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="开拓者">{{ showMsg.pushUsername }}</el-descriptions-item>
                        <el-descriptions-item label="创建类型">{{ showMsg.createUserType == 1 ? '小程序创建' : '后台创建'
                            }}</el-descriptions-item>
                        <el-descriptions-item label="创建人名称">{{ showMsg.createUsername }}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ formatterTime(showMsg.createTime)
                            }}</el-descriptions-item>
                    </el-descriptions>
                </div>
                <div v-if="showMsg.channelSecondList && showMsg.channelSecondList.length > 0">
                    <el-divider></el-divider>
                    <el-descriptions title="二次竞价">
                        <el-descriptions-item label="二次竞价的最高价">{{ showMsg.biddingTwoTopPrice }}</el-descriptions-item>
                        <el-descriptions-item label="二次竞价截止时间">{{ formatterTime(showMsg.biddingTwoEndTime)
                            }}</el-descriptions-item>
                    </el-descriptions>
                    <div>
                        <el-table :data="showMsg.channelSecondList" style="width: 100%">
                            <el-table-column prop="channelName" label="渠道商" width="180">
                            </el-table-column>
                            <el-table-column prop="pioneerName" label="开拓者" width="180">
                            </el-table-column>
                            <el-table-column prop="secondPrice" label="报价">
                            </el-table-column>
                            <el-table-column prop="secondRankNum" label="排名">
                            </el-table-column>
                            <el-table-column prop="secondTime" label="报价时间">
                                <template slot-scope="scope">
                                    {{ formatterTime(scope.row.secondTime) }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="statusName" label="状态">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div v-if="showMsg.channelFirstList && showMsg.channelFirstList.length > 0">
                    <el-divider></el-divider>
                    <el-descriptions title="一次竞价">
                        <el-descriptions-item label="一次竞价的最高价">{{ showMsg.biddingOneFirstPrice }}</el-descriptions-item>
                        <el-descriptions-item label="一次竞价截止时间">{{ formatterTime(showMsg.biddingOneEndTime)
                            }}</el-descriptions-item>
                    </el-descriptions>
                    <div>
                        <el-table :data="showMsg.channelFirstList" style="width: 100%">
                            <el-table-column prop="channelName" label="渠道商" width="180">
                            </el-table-column>
                            <el-table-column prop="pioneerName" label="开拓者" width="180">
                            </el-table-column>
                            <el-table-column prop="price" label="报价">
                            </el-table-column>
                            <el-table-column prop="rankNum" label="排名">
                            </el-table-column>
                            <el-table-column prop="price" label="报价时间">
                                <template slot-scope="scope">
                                    {{ formatterTime(scope.row.firstTime) }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="statusName" label="状态">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import API from "@/api/apiOtherProject";
import APISysLabel from "@/api/apiSysLabel";
import APIUser from "@/api/apiUser";

export default {
    name: "MediumList",
    props: {
        operationList: Array,
    },
    data() {
        return {
            tokenData: {
                token: localStorage.getItem("mujingtoken")
            },
            searchForm: {
                keyword: "",
                otherProjectType: null,
            },
            tableLoading: false,
            dataList: [],
            pageSize: 10,
            pageNum: 1,
            total: 0,
            pageSizes: [10, 20, 50, 100],
            formLabelWidth: '120px',
            otherProjectTypeList: [],
            addOtherProjectDialogVisible: false,
            addOtherProjectForm: {
                id: null,
                projectName: '',
                brands: '',
                totalPrice: null,
                choosePushUserId: null,
            },
            addOtherProjectRules: {
                projectName: { required: true, message: '请输入项目名称', trigger: 'blur' },
                brands: { required: true, message: '请输入品牌', trigger: 'blur' },
                totalPrice: { required: true, message: '请输入总价', trigger: 'blur' },
                choosePushUserId: { required: true, message: '请选择开拓者', trigger: 'change' },
            },
            formTitle: '新增其他项目',
            showMsgDialogVisible: false,
            showMsg: {},
            userList: [],
        };
    },
    activated() {
        this.pageNum = 1;
        this.dataList = [];
        this.getPost();
    },
    created() {},
    mounted() {
    },
    methods: {
        getPushUserList(){
            let params = {}
            APIUser.selectPushList(params).then((res) => {
                if (res.key === 1000) {
                    let list = res.result.list
                    this.userList = list
                }
            });
        },
        viewMsg(row){
            let params = {
                id: row.id
            }
            API.viewOtherProjectMsg(params).then((res) => {
                if (res.key === 1000) {
                    let showMsg = res.result.data
                    if (showMsg.biddingOneEndTime && showMsg.biddingTwoTimeSlot) {
                        showMsg.biddingTwoEndTime = showMsg.biddingOneEndTime + (showMsg.biddingTwoTimeSlot * 60 * 60 * 1000)
                    }
                    this.showMsg = showMsg
                    this.showMsgDialogVisible = true
                }
                this.$bus.$emit("show-loading", false);
            });
        },
        beforeOtherProjectHandleClose() {
            this.showMsgDialogVisible = false
        },
        handleCommand(type, row) {
            if (type == 1) {
                this.addOtherProjectForm = row;
                this.addOtherProjectDialogVisible = true;
                this.formTitle = '修改其他项目';
            } else if (type == 2) {
                let params = {
                    id: row.id
                }
                API.delOtherProject(params).then((res) => {
                    if (res.key === 1000) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.rePosts();
                    }
                    this.$bus.$emit("show-loading", false);
                });
            }
        },
        addOtherProjectSubmit() {
            this.$refs['addOtherProjectForm'].validate((valid) => {
                if (valid) {
                    this.$bus.$emit("show-loading", true);
                    const params = this.addOtherProjectForm;
                    if (params.id) {
                        API.doEditOtherProject(params).then((res) => {
                            if (res.key === 1000) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.addOtherProjectDialogVisible = false;
                                this.rePosts();
                            }
                            this.$bus.$emit("show-loading", false);
                        });
                    } else {
                        API.addOtherProject(params).then((res) => {
                            if (res.key === 1000) {
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                this.addOtherProjectDialogVisible = false;
                                this.rePosts();
                            }
                            this.$bus.$emit("show-loading", false);
                        });
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        addOtherProjectHandleClose() {
            this.addOtherProjectDialogVisible = false;
        },
        addOtherProject() {
            this.getPushUserList()
            this.formTitle = "新增其他项目";
            this.addOtherProjectForm = {
                id: null,
                projectName: '',
                brands: '',
                totalPrice: null,
                choosePushUserId: null,
            };
            this.addOtherProjectDialogVisible = true;
        },
        formatterTime(time) {
            if (time) {
                return this.$moment(new Date(time)).format("YYYY-MM-DD HH:mm:ss");
            } else {
                return "-";
            }
        },
        // 分页pageSize改变
        handleSizeChange(e) {
            this.pageSize = e;
            this.rePosts();
        },
        // 分页pageNum改变
        handleCurrentChange(e) {
            this.pageNum = e;
            this.getPost();
        },
        // 重新请求
        rePosts() {
            this.pageNum = 1;
            this.dataList = [];
            this.getPost();
        },
        getPost() {
            this.$bus.$emit("show-loading", true);
            const params = {
                token: this.$store.state.token,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            };
            if (this.searchForm.keyword) {
                params.keyword = this.searchForm.keyword;
            }
            if (this.searchForm.otherProjectType) {
                params.otherProjectType = this.searchForm.otherProjectType;
            }
            API.getOtherProjectList(params).then((res) => {
                if (res.key === 1000) {
                    this.total = res.result.count;
                    res = res.result.list;
                    res.forEach(item => {
                        if (item.createTime) {
                            item.createDate = this.$moment(item.createTime).format("YYYY-MM-DD HH:mm");
                        }
                    })
                    this.dataList = res;
                }
                this.$bus.$emit("show-loading", false);
            });
        },
        getSysLabel() {
            this.$bus.$emit("show-loading", true);
            const params = {
                token: this.$store.state.token,
                sysLabelIds: '43',
            };
            APISysLabel.getSysLabelValueManageList(params).then((res) => {
                if (res.key === 1000) {
                    this.otherProjectTypeList = res.result.data[43];
                }
                this.$bus.$emit("show-loading", false);
            });
        },
    },
};
</script>

<style>
.mask-img-del-size {
    width: 50px;
    text-align: center;
    height: 50px;
    margin: 25px;
}

.mask-img {
    position: absolute;
    margin-top: -100px;
    width: 100%;
    height: 100%;
    bottom: 0;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 0;
    margin-left: -10px;
}

.banner-pic-sub .mask-img:hover {
    opacity: 1;
    cursor: pointer;
}

.el-upload__tip {
    color: #969799;
    margin-top: 0;
    height: 30px;
    line-height: 30px;
}

.avatar-uploader .el-upload .avatar-uploader-icon {
    width: 100px;
    height: 100px;
    line-height: 100px !important;
}
</style>

<style lang="sass">

.avatar-uploader-icon
  font-size: 28px
  color: #8c939d
  width: 178px
  height: 178px
  line-height: 178px !important
  text-align: center
.device-list
  padding-top: 26px
  @include container
.editDialog
  .el-dialog__header
    border-bottom: 1px solid #EFEFEF
    .el-dialog__headerbtn
      font-size: 20px
  .el-dialog__footer
    text-align: left
    margin-left: 120px

</style>
